<template lang="pug">
  MapInfo(title="瑞丽市某某值守点" subTitle="值守概况")
    div.info-wrap
      StaticCompareView.info-item(v-for="(item, index) in infoData" :key="index"
        :itemData="item" :valueColor="valueColors[index]")
</template>

<script>
export default {
  name: "ModuleMapInfo",
  data() {
    return {
      infoData: [
        {
          label: '现有确诊',
          value: 44,
          compare: {
            label: '较昨日',
            value: 0,
          }
        },
        {
          label: '现有疑似',
          value: 0,
          compare: {
            label: '较昨日',
            value: 0,
          }
        },
        {
          label: '累计治愈',
          value: 0,
          compare: {
            label: '较昨日',
            value: 0,
          }
        },
      ]
    }
  },
  computed: {
    valueColors() {
      return ['#F6652C', '#F3AB32', '#00CC87'];
    }
  }
}
</script>

<style lang="scss" scoped>
.map-info{
  position: absolute;
  bottom: rem(80);
  right: rem(160);
  .title{
    font-size: rem(30);
    color: #FFFFFF;
  }
  .sub-title{
    font-size: rem(26);
    color: #FFFFFF;
    margin-bottom: rem(24);
  }
  .info-wrap{
    display: flex;
    .info-item{
      & + .info-item{
        margin-left: rem(50);
      }
      &:nth-child(1) {
        .value{
          color: #698B95;
        }
      }
      &:nth-child(2) {
        .value{
          color: #F3AB32;
        }
      }
      &:nth-child(3) {
        .value{
          color: #1D966D;
        }
      }
      .label{
        font-size: rem(20);
        line-height: rem(20);
        color: #698B95;
        margin-bottom: rem(14);
        font-weight: bold;
      }
      .value{
        font-size: rem(50);
        line-height: rem(50);
        color: #F6652C;
        margin-bottom: rem(14);
        font-weight: bold;
      }
      .compare{
        display: flex;
        .compare-label{
          font-size: rem(16);
          line-height: rem(16);
          color: #FFFFFF;
          padding-right: rem(6);
          font-weight: bold;
        }
        .compare-value{
          font-size: rem(16);
          line-height: rem(16);
          color: #05FDBB;
          font-weight: bold;
        }
      }
    }
  }
}
</style>
